import React, { Component } from 'react'
import '../css/goodsinfo.css'
import { getGoodsInfo } from '../request/api'

export default class GoodsInfo extends Component {
    constructor(){
        super()
        this.state={
            goods:{}
        }
    }
    render() {
        const {goods}=this.state
        return (
            <div className="goodsdetail">
                <div className='title'>
                    <div className='tl' onClick={()=>{this.before()}}>&gt;</div>
                    <div className="tr">商品详情</div>
                </div>
                <div>
                    <div className="detail-top">
                        <div className="good-top">商品</div>
                        <div className="good-top">评价</div>
                        <div className="good-top">详情</div>
                        <div className="good-top">推荐</div>
                    </div>
                    <div className="det-pic-box">
                        <img src={this.$pregImg+goods.img} />
                        <div className="det-number">8/8</div>
                    </div>
                    <div className="detail-goods">
                        <div className="d-fir">
                            <div className="d-fir-l">
                                <span>
                                    <b>&yen;</b>
                                    {goods.price}
                                </span>
                                <span>￥{goods.market_price}</span>
                            </div>
                            <div className="d-fir-r">
                                <span>收藏</span>
                            </div>
                        </div>
                        <div className="sec">
                            <p>{goods.goodsname}</p>
                            <p>{goods.description}</p>
                        </div>
                        <div className="third">11.11限时299元起</div>
                        <div className="fourth">
                            <p>此商品于2020-11-11,00点结束闪购特卖，品牌美妆闪购专场</p>
                            <span>查看&gt;</span>
                        </div>
                    </div>
                    <div className="discounts-box">
                        <div className="dis-f">
                            <span className="d-quan">领券</span>
                            <div className="d-money">
                                <span>300</span>
                                <span>50</span>
                                <span>10</span>
                            </div>
                        </div>
                        <div className="dis-s">
                            <span className="fen">分期</span>
                            <div className="canselect">
                                可选3/6/12期
                                <span>&gt;</span>
                            </div>
                        </div>
                    </div>
                    <div className="shopping-box">
                        <div className="shop-pic">
                            <div className="s-box">
                                <img src="/hotline.png"  />
                                <span>客服</span>
                            </div>
                            <div className="s-box">
                                <img src="/store.png"  />
                                <span>店铺</span>
                            </div>
                            <div className="s-box">
                                <img src="/shoppingcart.png"  />
                                <span>购物车</span>
                            </div>
                        </div>
                        <div className="shopping-cart" >加入购物车</div>
                    <div className="buy-now" >立即购买</div>
            </div>
    </div >
  </div >
        )
    }
    before(){
        this.props.history.go(-1)
    }
    componentDidMount(){
        // console.log(this.props.match.params.id);
        getGoodsInfo({id:this.props.match.params.id}).then(res=>{
            if(res.code===200){
                // console.log(res.list[0]);
                this.setState({goods:res.list[0]})
                // console.log(this.state.goods);
            }
        })
    }
}
